import { vh, vw } from "@/common/dimensions";
import globalStyles from "@/common/styles/globalStyles";
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
	View,
	Modal,
	StyleSheet,
	Animated,
	Pressable,
    Image,
} from "react-native";

// 通过 props 接收 side 属性来判断侧边栏位置
const SideMenuWithModal = (props: {
	side: string;
	sideModalShow: boolean;
	sideViewHeight: number;
	scrollHeight: number;
    hideSideModal: Function;
    openSideMoadl:Function;
	children?: React.ReactNode;
}) => {
	const {
		side = "left",
		sideModalShow,
		sideViewHeight,
		scrollHeight,
		hideSideModal,
        openSideMoadl,
		children,
	} = props;
	const [slideAnim] = useState(
		new Animated.Value(side === "left" ? -80 * vw : 80 * vw)
	); // 根据side属性设置初始动画值

	// 侧边栏子元素的高度
	const [childHeight, setChildHeight] = useState(0);

	useEffect(() => {
		sideModalShow ? openMenu() : closeMenu();
	}, [sideModalShow]);

	const sideModalHeight = useMemo(() => {
		let computedHeight;
		100 * vh - (scrollHeight + sideViewHeight) <= childHeight + 50
			? (computedHeight = scrollHeight - childHeight - 50)
			: (computedHeight = scrollHeight + sideViewHeight);
		return computedHeight;
	}, [sideViewHeight, scrollHeight, childHeight]);

	const openMenu = () => {
		Animated.timing(slideAnim, {
			toValue: 0, // 滑动到屏幕内
			duration: 100,
			useNativeDriver: true, // 使用原生驱动动画
		}).start();
	};
	const closeMenu = () => {
		hideSideModal();
		Animated.timing(slideAnim, {
			// 根据side属性滑动到屏幕外
			toValue: side === "left" ? -80 * vw : 80 * vw,
			duration: 80,
			useNativeDriver: true,
		}).start();
	};

	// 在子元素布局完成时计算其高度
	const onChildLayout = (event: any) => {
		const { height } = event.nativeEvent.layout;
		setChildHeight(height);
	};
	return (
		<View>
			<Modal
				transparent
				animationType="fade"
				visible={sideModalShow}
				statusBarTranslucent={true}
				onRequestClose={closeMenu}
			>
				<Pressable style={styles.overlay} onPress={closeMenu}>
                    <Animated.View
                        onLayout={onChildLayout} // 监听布局完成后，获取子元素的高度
                        style={[
                            styles.sideMenu,
                            {
                                transform: [{ translateX: slideAnim }],
                                left: side === "left" ? 0 : null,
                                right: side === "right" ? 0 : null,
                                top: sideModalHeight,
                            },
                        ]}
                    >
                        {children}
                        <Pressable
                            style={[
                                styles.closeBtn,
                                globalStyles.aiCenter,
                                globalStyles.jcCenter,
                                {
                                    height: childHeight || 80,
                                    borderTopLeftRadius:side === "right" ? 8 : 0,
                                    borderBottomLeftRadius:side === "right" ? 8 : 0,
                                    borderTopRightRadius:side === "left" ? 8 : 0,
                                    borderBottomRightRadius:side === "left" ? 8 : 0,
                                    left: side === "left" ? null : 0,
                                    right: side === "right" ? null : 0,
                                    transform: [side === "left" ? { translateX: 8 } :{ translateX: -8 } ],
                                },
                            ]}
                            onPress={closeMenu}
                        >
                            <Image 
                                style={{width:16 , height:16}} 
                                source={ side === 'left'? require('@/assets/common/chevron-left.png') : require('@/assets/common/chevron-right.png') } 
                            />
                        </Pressable>
                    </Animated.View>
                </Pressable>
			</Modal>
		</View>
	);
};

const styles = StyleSheet.create({
	overlay: {
		width: 100 * vw,
		height: 100 * vh,
		backgroundColor: "rgba(0,0,0,0.2)", // 半透明遮罩层
		justifyContent: "center",
		alignItems: "center",
	},
	sideMenu: {
		width: 80 * vw, // 侧边栏宽度为屏幕宽度的80%
		backgroundColor: "#fff",
		paddingHorizontal: 20,
		paddingVertical: 12,
		position: "absolute",
	},
	menuText: {
		fontSize: 18,
		marginBottom: 20,
	},
	closeBtn: {
		width: 16,
		position: "absolute",
		zIndex: -1,
		top: 0,
		backgroundColor: "#0d89f2",
	},
});

export default SideMenuWithModal;
